<template>
	<div class="">
		<!--滚动内容 start-->
		<el-scrollbar class="app-container-scroll-bar">
			
			<pageTitle :title="pageTitle" :hasBack="true" ></pageTitle>
			
			<!--详情-->
			<detailCard :data="cardData" icon-class="icon-jiqun"></detailCard>
			
			
			<el-tabs type="border-card" style="margin:20px;">
			  <!-- <el-tab-pane label="拓扑结构">拓扑结构</el-tab-pane> -->
			  <el-tab-pane label="主机">
			  	<hostList ref="hostList" @command="listCommand"></hostList>
			  </el-tab-pane>
			  <!-- <el-tab-pane label="负载均衡">负载均衡</el-tab-pane> -->
			  <!-- <el-tab-pane label="共享存储">共享存储</el-tab-pane> -->
			</el-tabs>
			
			
    </el-scrollbar>
    <!--滚动内容 end -->
		
		<!--弹窗内容 start-->
		<div class="app-output-window">
			
			<addJQZJDialog
				ref="addJQZJDialog"
				:id="clusterId"
				@addSucess="refresh"
				></addJQZJDialog>
			
		</div>
		<!--弹窗内容 end-->
		
	</div>
</template>

<script>
	
	import pageTitle from "@/view/layout/components/content/pageTitle";
	import detailCard from "@/view/components/card/detailCard";
	import hostList from "./jiqun/hostList";
	import addJQZJDialog from "@/view/components/dialog/addJQZJDialog";
	
	
	import {getClusterInfo} from "@/service/swagger/ResourceClusterController";
	import { jiqunTypeFilter } from '@/filters/status/index';
  import { getDashboardById } from "@/service/swagger/ClusterDashboardController";
	

	
	export default {
		components : {
			pageTitle,
			detailCard,
			addJQZJDialog,
			
			hostList,
		},
		data(){
			return {
				// 页面主标题
				pageTitle : "集群详情",
				pageData : [],
				cardData : null,
				clusterId : this.$route.query.id,
				clusterName:this.$route.query.clusterName,
				cardConifg : {
					clusterName : "集群名称",
					clusterType : "集群类型",
					hostCount : "主机数",
					useHostCount : "可用主机",
					memoryTotal : "内存",
					diskTotal : "磁盘",
				}
			}
		},
		mounted(){
			this.initPage();
		},
		methods : {
			listCommand(command,row,index){
				console.log(command)
				if(command&&this[command]){
					this[command](row,index);
				}
			},
			
			initPage(){
				
				getClusterInfo({
					id : this.clusterId || "",
				}).then(ret=>{
					// 拿集群的内存 磁盘信息
					getDashboardById({
						id:this.clusterId
					}).then(res=>{
						if(ret&&ret.code == 0){
							ret.data.memoryTotal = res.data.memoryUsed + '/' + res.data.memoryTotal
							ret.data.diskTotal = res.data.diskUsed + '/' + res.data.diskTotal
							this.pageData = ret.data ;
							this.initCardData()
						}
					})
				})
			},
			
			initCardData(){
				let data = {};
				for(let i in this.pageData){
					const _name = this.cardConifg[i]
					if(_name){
						if(i=='clusterType'){
							data[_name] = {
								html : jiqunTypeFilter(this.pageData[i])
							};
						}else{
							data[_name] = this.pageData[i];
						}
					}
				}
				this.cardData = data;
			},
			//新增主机
			addZJ(row,index){
				this.$refs.addJQZJDialog.open();
			},
			// 刷新
			refresh(){
				this.refs.hostList.search();
			}
			
			
			
			
		}
	}
</script>

<style>
	
</style>